/*-----------------------------------------------------------------------------------*/
/*	Common
/*-----------------------------------------------------------------------------------*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none;
}

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.page-title {
  font-size: 15px;
  font-weight: bold;
  margin-left: -20px;
  margin-right: -20px;
}

.page-title > li:last-child{
  font-size: 20px;
  color: black;
  font-weight: bolder;
}

.status-err,
.status-off,
.status-,
.status-false,
.status-abnormal {
  background-color: #ff6868;
}
.status-on,
.status-normal {
  background-color: #05a705;
}

.status-expired {
  background-color: #808080;
}

.value-big {
  font-size: 20px;
}

.setting-icon {
  margin-top: -57px;
  margin-bottom: 10px;
}

/*-----------------------------------------------------------------------------------*/
/*	Layout - overwrite the bootstrap styles
/*-----------------------------------------------------------------------------------*/
#main-container {
  max-width: 100%;
}

.main-view {
  min-height: 500px;
}

.container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.container > div[ui-view] {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@box-content-align: left;

.box-group-item (@height: 80px; @margin: 5px) {
  height: @height;
  margin: @margin;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  .rounded-corners;
}

.box-same-group {
  margin-top: 20px;
  text-align: @box-content-align;
  border: 1px solid red;
}

.box-same-group > div {
  .box-group-item;
}

.box-same-group a {
  color: black;
}

.box-table-group {
  text-align: @box-content-align;
  border: 1px solid red;
}

.box-table-group > div {
  display: table;
  .box-group-item;
}

.box-same-small-group > div {
  height: 50px;
}

@media (min-width: 1200px) {
  .box-same-group > div {
    width: 120px;
  }
}
@media (min-width: 980px) {
  .box-same-group {
    padding-left: 2%;
  }
  .box-same-group > div {
    width: 13%;
  }
}
@media (max-width: 979px) {
  .box-same-group {
    padding-left: 2%;
  }
  .box-same-group > div {
    width: 18%;
  }
}
@media (min-width: 768px) and (max-width: 979px) {

}
@media (max-width: 767px) {
  .box-same-group > div {
    width: 23%;
  }
}

@media (min-width: 569px) and (max-width: 640px) {

}


@media (max-width: 568px) {
  .box-same-group {
    padding-left: 2%;
  }
  .box-same-group > div {
    width: 30%;
  }
}

@media (min-width: 481px) and (max-width: 568px) {

}

@media (max-width: 480px) {
  .container > div[ui-view] {
    width: 97%;
    margin-left: auto;
    margin-right: auto;
  }

  .box-same-group {
    margin-left: -10px;
    margin-right: -10px;
  }
  .box-same-group > div {
    width: 30%;
  }
}

@media (max-width: 360px) {
  .box-same-group {
    margin-left: -15px;
    margin-right: -15px;
  }
  .box-same-group > div {
    width: 30%;
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 320px) {

}

/*-----------------------------------------------------------------------------------*/
/*	Fullscreen
/*-----------------------------------------------------------------------------------*/
.full-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: white;
  overflow: hidden;
}

.full-landscape {
  margin-left: auto;
  margin-right: auto;
  .full-screen;
}

.full-landscape-chart {
  width: 95%;
  height: 95%;
}

@media (max-height: 300px) {
  .full-landscape-chart {
    height: 90%;
  }
}

@media (max-height: 250px) {
  .full-landscape-chart {
    height: 75%;
  }
}

@media (max-height: 210px) {
  .full-landscape-chart {
    height: 70%;
  }
}

/*-----------------------------------------------------------------------------------*/
/*	Root Header
/*-----------------------------------------------------------------------------------*/
.root-header {
  position: relative;
}

.navbar {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------------------*/
/*	Root Footer
/*-----------------------------------------------------------------------------------*/
.root-footer {
  border-top: 1px solid #cacaca;
  margin-top: 20px;
  padding: 10px;
  color: #888888;
}
.root-footer a{
  color: #5f5f5f;
}

/*-----------------------------------------------------------------------------------*/
/*	Side Menu
/*-----------------------------------------------------------------------------------*/
.sidr {
  width: 200px;
}

.sidr.left {
  left: -200px;
}

.sidr.right {
  right: -200px;
}

.sub-menu {
  display: none;
}

.sidr-class-sub-menu {
  padding: 10px 0px 10px 40px;
}

.sidr-class-sub-menu a{
  text-decoration: none;
  color: white;
}

.sidr-class-sub-menu a:visited{
  text-decoration: none;
  color: white;
}

.page-cover-enabled {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}

#cover-close {
  display: none;
  position: relative;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 40px;
  z-index: 3100;
}

/*-----------------------------------------------------------------------------------*/
/*	Examples
/*-----------------------------------------------------------------------------------*/

.bs-glyphicons {
  padding-left: 0;
  padding-bottom: 1px;
  margin-bottom: 20px;
  list-style: none;
  overflow: hidden;
}

.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
  margin: 0 -1px -1px 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  border: 1px solid #ddd;
}

.bs-glyphicons .glyphicon {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 24px;
}

.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .bs-glyphicons li {
    width: 12.5%;
  }
}

/*-----------------------------------------------------------------------------------*/
/*	Media Query
/*-----------------------------------------------------------------------------------*/

@media (min-width: 1200px) {

}
@media (min-width: 980px) {

}
@media (max-width: 979px) {

}
@media (min-width: 768px) and (max-width: 979px) {

}
@media (max-width: 767px) {
  .navbar-toggle {
    position: relative;
    float: left;
  }
  .navbar-brand {
    margin-left: 0;
    text-align: left;
  }
}

@media (min-width: 569px) and (max-width: 640px) {

}


@media (max-width: 568px) {

}

@media (min-width: 481px) and (max-width: 568px) {

}

@media (max-width: 480px) {

}

@media (max-width: 360px) {

}

@media (max-width: 320px) {

}
